<template>
  <div>
    <el-dialog
      v-model="drawerletter"
      style="border-radius: 20px; background-color: #f7f9fa"
      width="1000"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="personLetter f-a-c">
        <div class="left">
          <div class="leftTitle">私信</div>
          <svg-icon
            name="icon-guanbi"
            class="icon-guanbi click"
            @click="handleClose"
          ></svg-icon>
          <div class="leftbox f-d-c">
            <div
              class="item f-a-c"
              v-for="(item, index) in personlist"
              :key="index"
              @click="personListClick(item, index)"
              @contextmenu.prevent.stop="showMenu(item)"
              :class="personCurrent == index ? 'color' : ''"
            >
              <div
                class="isshowRightbox f-j-a-c"
                v-if="item.isshowRight && index != 0"
                @click.stop="delduihua(item)"
              >
                <span>删除对话</span>
              </div>
              <div class="itemleft" v-if="item.user">
                <el-badge
                  :value="item.read_count"
                  :max="99"
                  class="item"
                  :hidden="item.read_count > 0 ? false : true"
                >
                  <img :src="item.user.user_avatar" alt="" />
                </el-badge>
              </div>

              <div class="itemcenter f-d-c" v-if="item.user">
                <span>{{ item.user.user_name }} </span>
                <span v-html="item.chat_content"></span>
              </div>
              <div class="itemright">
                <span>{{ item.datetime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="rightTitle">{{ name }}</div>
          <!-- <div
            class="rightbox f-d-c"
            v-if="personCurrent == 0"
            ref="rightboxList"
            @scroll="handleScroll"
          >
            <div class="rightitem" v-for="(item, index) in list" :key="index">
              <span>{{ item.createTime }}</span>
              <div class="rightznxx f-a-c">
                <div class="znxximg">
                  <img src="../assets/img/desai.png" alt="" />
                </div>
                <div class="znxxcontent">
                  <div class="htmlznxx" v-html="item.details"></div>
                </div>
              </div>
            </div>
          </div> -->
          <div style="background: #f7f9fa">
            <div
              class="rightbox newinfobox"
              ref="rightboxList"
              @scroll="handleScroll"
            >
              <div
                class="chongxin f-a-c f-j-a-c"
                v-if="listmessage.length == 0"
              >
                <svg-icon name="loading"></svg-icon>
              </div>

              <div
                class="rightitem nocenter"
                v-for="item in listmessage"
                :key="'msg' + item.id"
              >
                <span>{{ item.datetime }}</span>
                <div class="infoitem f-a-c" v-if="oldID != item.object_id">
                  <div class="headerimg">
                    <img
                      :src="
                        item.user.user_avatar 
                      "
                      alt=""
                    />
                  </div>
                  <div class="userinfo f-a-c" v-if="item.mode == 'text'">
                    <span v-html="item.chat_content"></span>
                  </div>
                  <div class="userinfoImg" v-if="item.mode == 'img'">
                    <el-image
                      @click="imgView(item.chat_image)"
                      style="width: 150px; height: 150px; margin-left: 10px"
                      :src="item.chat_image"
                      :zoom-rate="1.2"
                      :preview-src-list="srcList"
                      :initial-index="4"
                      fit="cover"
                    />
                  </div>
                </div>
                <div class="infoitem infoLfet f-a-c" v-else>
                  <div class="userinfo f-a-c" v-if="item.mode == 'text'">
                    <span v-html="item.chat_content"></span>
                  </div>
                  <div class="userinfoImg" v-if="item.mode == 'img'">
                    <el-image
                      @click="imgView(item.chat_image)"
                      style="width: 150px; height: 150px"
                      :src="item.chat_image"
                      :zoom-rate="1.2"
                      :preview-src-list="srcList"
                      :initial-index="4"
                      fit="cover"
                    />
                  </div>
                  <div class="headerimg" style="margin-left: 10px">
                    <img
                      :src="
                        item.user.user_avatar 
                      "
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="rightinput">
              <textarea
                class="f-j-a-c"
                placeholder="请在这里输入回复消息..."
                name=""
                id=""
                cols="30"
                rows="10"
                @input="handleInput"
                v-model="inputData"
                @keydown="promptsInputEnter"
              ></textarea>
              <div class="buttonInput f-a-c">
                <div class="bqb">
                  <svg-icon
                    class="svg click"
                    name="bqb"
                    @click="openbqbClci"
                  ></svg-icon>
                  <div class="biaoqingbao f-a-c" v-if="openbqb">
                    <div
                      class="biaoqingbaoitem click"
                      @click="EmojiAdateClick(item, index)"
                      v-for="(item, index) in EmojiAdate"
                      :key="index"
                    >
                      <img :src="item.emoji" alt="" />
                    </div>
                  </div>
                </div>
                <div class="">
                  <upload
                    class="upload-demo f-j-a-c"
                    ref="uploadRef"
                    @sucess="uploadsucess"
                    @progressChange="progressChange"
                    @fileQueued="fileQueued"
                    :checkReturn="checkReturn"
                    :limit="9"
                  >
                    <svg-icon class="svg click" name="icon-ft"></svg-icon>
                  </upload>
                </div>

                <div class="Sebdbutton click f-j-a-c" @click="sendmsg">
                  发送
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="moban" v-if="openbqb || isshowRight" @click="close"></div>
    </el-dialog>
  </div>
</template>

<script>
// import WebSocketTool from "@/utils/websocket";

// import { connectWebSocket } from "@/utils/websocket.js";
import upload from "@/components/upload.vue";

import appData from "@/utils/appdataEmoji.js";
import { noticeRecode } from "@/axios/api.js";
import { useRouter } from "vue-router";
import {
  getUserChatList,
  getUserChat,
  configData2,
  addChat,
  readUserChat,
  userDelMessage,
} from "@/axios/community.js";
import { ElMessage } from "element-plus";

import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  watch,
  nextTick,
} from "vue";

import { useStore } from "vuex";
import { info } from "../axios/community";
export default defineComponent({
  components: {
    upload,
  },
  props: {
    drawerletter: {
      // 判断打开
      type: Boolean,
      default: false,
    },
  },
  setup(props, { attrs, slots, emit }) {
    let store = useStore();

    let personlist = computed(() => {
      let arr = store.state.personlist;
      // if (arr.length) {
      // if (arr[0].user.user_name.indexOf("站内消息") == -1) {
      //   arr.unshift(data.zhannei);
      // }
      // arr.forEach((item, index) => {
      //   item.isshowRight = false;
      //   item.chat_content = item.chat_content.replace(
      //     /<a\b[^>]*>(.*?)<\/a>/g,
      //     "$1"
      //   );
      // });
      // }
      // else {
      //   arr.push(data.zhannei);
      // }
      return arr;
    });
    let websoketnums = computed(() => {
      return store.state.websoketnums;
    });
    const rightboxList = ref(null);
    watch(
      () => websoketnums.value,
      (newval, oldVal) => {
        if (data.personCurrent != -1) {
          getUserChatPost(data.oldID, true);
          getreadUserChat(data.oldID);
        }
      }
    );
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let data = reactive({
      checkReturn: false, // 是否超过
      openbqb: false, // 表情包开关
      EmojiAdate: [], // 表情包
      srcList: [], // 图片
      oldID: 0,
      listmessage: [], // 消息列表
      list: [], //站内消息
      name: "",
      personCurrent: -1,
      inputData: "",
      page: 0,
      isOver: false,
      historyScrollTop: 0, //滚动条历史高度
      konggechek: false, //空格
      // zhannei: {
      // chat_content: "",
      // datetime: "",
      // read_count: 0,
      // user: {
      // user_avatar: new URL("../assets/img/desai.png", import.meta.url),
      // user_name: "站内消息",
      // user_introduce: "脑洞大开，蓄势待发！",
      // },
      // },
      isshowRight: false,
      WebSocketTool: "",
      xuhaoID: 0,
    });
    onMounted(() => {
      getconfigData2();
      if(data.oldID === undefined || data.oldID === null || data.oldID === 0){
        // console.log(personlist.value)
        if(personlist && personlist.value && personlist.value.length > 0){
          personListClick(personlist.value[0], 0);
        }
      }
      // console.log(store.state.Socket);
      // console.log(WebSocketTool);
      data.WebSocketTool = store.state.Socket;
      if (data.WebSocketTool) {
        xiaoxiweb();
      }
    });
    onUnmounted(() => {});
    // 消息列表
    let newgetUserChatLists = () => {
      getUserChatList().then((res) => {
        store.commit("setPersonlist", res.data);
      });
    };
    let xiaoxiweb = () => {
      data.WebSocketTool.ws.onmessage = (msg) => {
        const message = JSON.parse(msg.data);
        newgetUserChatLists();
        if (message.data) {
          if (data.oldID && data.oldID == message.data.from_user.id) {
            let infodata = {
              user: {},
            };
            if (message.data.chat_content) {
              infodata.mode = "text";
              infodata.chat_content = message.data.chat_content;
            }
            if (message.data.chat_image) {
              infodata.mode = "img";
              infodata.chat_image = message.data.chat_image;
            }
            infodata.id = data.xuhaoID++;
            infodata.user.user_avatar = message.data.from_user.user_avatar;
            data.listmessage.push(infodata);
            proxy.$nextTick(() => {
              rightboxList.value.scrollTop =
                rightboxList.value.scrollHeight - data.historyScrollTop;
            });
            getreadUserChat(data.oldID);
            // console.log("同一个人");
          }
        }
      };
    };
    // 修改鼠标右键
    let showMenu = (item) => {
      data.isshowRight = true;
      item.isshowRight = true;
    };
    let errorMessage = (message) => {};
    // 已读消息
    let getreadUserChat = (ids) => {
      let id = "?oid=" + ids;
      readUserChat({ id }).then((res) => {
        getUserChatLists(ids);
      });
    };
    // 获取表情包
    let getconfigData2 = () => {
      let id = "?which=2";
      configData2({ id }).then((res) => {
        data.EmojiAdate = Object.values(res.data.emoji).flatMap((page) => page);
      });
    };
    // 表情包选择
    let EmojiAdateClick = (item, index) => {
      data.inputData = data.inputData + item.alt;
    };

    // 提取表情
    let getEmjoi = (content) => {
      const regex =
        /<mini-emoji\s+alt="([^"]*)"\s+emoji="([^"]*)"\s+width="([^"]*)"\s+height="([^"]*)"><\/mini-emoji>/g;
      const matches = content.matchAll(regex);

      const emojis = Array.from(matches).map((match) => {
        const [, alt, emoji, width, height] = match;
        return { alt, emoji, width, height };
      });

      const imgTags = emojis.map(
        ({ alt, emoji, width, height }) =>
          `<img alt="${alt}" src="${emoji}" width="${width}" height="${height}">`
      );
      return imgTags.join("");
    };
    // 查询消息详情
    let getUserChatPost = (ids, type) => {
      if (!data.isOver) {
        data.page += 1;
      } else {
        return;
      }
      let id = "?oid=" + ids + "&page=" + data.page;
      getUserChat({ id }).then((res) => {
        data.historyScrollTop =
          rightboxList.value.scrollTop + rightboxList.value.scrollHeight;

        let datalist = res.data.data;
        data.isOver = datalist.length <= 5;

        datalist.forEach((item, index) => {
          const regex =
            /<mini-emoji\s+alt="(\[[\s\S]+?\])"\s+emoji="([\s\S]+?)"\s+width="(\d+)"\s+height="(\d+)"\s*><\/mini-emoji>/g;
          const matches = item.chat_content.match(regex);
          if (matches) {
            item.chat_content = getEmjoi(item.chat_content);
          }
          item.chat_content = item.chat_content.replace(
            /<a\b[^>]*>(.*?)<\/a>/g,
            "$1"
          );
        });

        if (datalist) {
          if (data.page == 1) data.listmessage = [];
          data.listmessage = data.listmessage.concat(datalist);
          data.listmessage = [...data.listmessage];
          data.listmessage.sort((a, b) => {
            return a.id - b.id;
          });
        } else {
          data.isOver = true;
        }
        data.xuhaoID = data.listmessage[data.listmessage.length - 1].id;
        // console.log(data.xuhaoID);
        if (type == true) {
          proxy.$nextTick(() => {
            rightboxList.value.scrollTop =
              rightboxList.value.scrollHeight - data.historyScrollTop;
          });
        } else {
          gobottom();
        }
      });
    };

    // 消息列表
    let getUserChatLists = (id) => {
      let personlistnewlist = personlist.value;
      let xiaoxiNum = 0;
      // console.log(personlistnewlist);
      personlistnewlist.forEach((item, index) => {
        if (item.user) {
          if (id == item.user.id) {
            item.read_count = 0;
          }
          xiaoxiNum += Number(item.read_count);
        }
      });
      if (xiaoxiNum == 0) {
        xiaoxiNum = "";
      }
      store.commit("setxiaoxiNum", xiaoxiNum);

      store.commit("setPersonlist", personlistnewlist);
    };
    let replaceGreaterThanSign = (str) => {
      return str
        .replace(/@@@/g, "<")
        .replace(/<img\b(?!.*\bclass\b)/g, function (match) {
          // 在这里添加 class='img'
          return match.replace(/<img/, "<img style='width:268px' ");
        })
        .replace(/###/g, ">");
    };
    // 获取站内消息
    let getnoticeRecode = () => {
      noticeRecode().then((res) => {
        res.data.forEach((item, index) => {
          item.details = replaceGreaterThanSign(item.detail);
        });
        data.list = res.data;
      });
    };
    // 关闭弹窗
    let handleClose = () => {
      emit("closeinfo");
    };
    // 滚动到底部
    let gobottom = () => {
      proxy.$nextTick(() => {
        if (rightboxList.value) {
          rightboxList.value.scrollTop = rightboxList.value.scrollHeight;
        }
      });
    };
    // 聊天人切换
    let personListClick = (item, index) => {
      data.listmessage = [];
      data.page = 0;
      data.personCurrent = index;
      data.name = item.user.user_name;

      data.isOver = false;

      getUserChatPost(item.user.id, false);
      getreadUserChat(item.user.id);
      data.oldID = item.user.id;
      // console.log(data.oldID)
      if (index != 0) {
        data.list = 0;
      }
      // gobottom();
    };
    // 监听回车
    let promptsInputEnter = (event) => {
      // 回车 发送消息
      if (event.keyCode === 13 && !event.shiftKey) {
        sendmsg("");
      }
    };
    // 查看大图
    let imgView = (img) => {
      data.srcList = [];
      data.srcList.push(img);
    };
    // 打开表情包
    let openbqbClci = () => {
      data.openbqb = !data.openbqb;
      // console.log(data.openbqb);
    };
    // 关闭
    let close = () => {
      data.openbqb = false;
      data.isshowRight = false;
      personlist.value.forEach((item, index) => {
        item.isshowRight = false;
      });
    };
    let handleInput = () => {
      // console.log(event.target.value.trim().length);
      if (event.target.value.trim().length >= 1) {
        data.konggechek = false;
      }
      // 检查输入的值是否以空格开头
      if (
        event.target.value[0] === " " &&
        event.target.value.trim().length >= 1
      ) {
        data.konggechek = false;
      } else if (
        event.target.value[0] === " " &&
        event.target.value.trim().length == 0
      ) {
        data.konggechek = true;
      }
      // console.log(data.konggechek);
    };

    // 上传成功
    let uploadsucess = async (value) => {
      await sendmsg({url: value});
    };
    let progressChange = () => {};
    let fileQueued = (value) => {};
    // 发送消息
    let sendmsg = (datas) => {
      if (data.konggechek) {
        return ElMessage.error("请勿发送空白内容");
      }
      if (!data.inputData && !datas.url) {
        return ElMessage.error("请输入发送内容");
      }
      addChat({
        chat_audio_length: 0,
        chat_audio_url: "",
        chat_content: data.inputData,
        chat_image: datas.url || "",
        oid: data.oldID,
      }).then((res) => {
        data.inputData = "";
        const regex = /<mini-emoji[^>]*?emoji="(.*?)"/g;
        const matches = res.data.chat_content.match(regex);
        if (matches) {
          res.data.chat_content = getEmjoi(res.data.chat_content);
        }
        data.listmessage.push(res.data);
        gobottom();
        getUserChatLists();
      });
    };
    let handleScroll = () => {
      if (rightboxList.value.scrollTop == 0 && data.personCurrent != 0) {
        getUserChatPost(data.oldID, true);
      }
    };
    let delduihua = (item) => {
      // console.log(item);
      let id = "?userid=" + item.user.id;
      userDelMessage({ id }).then((res) => {
        personlist.value.forEach((items, indexs) => {
          if (items.user.id == item.user.id) {
            personlist.value.splice(indexs, 1);
          }
          item.isshowRight = false;
        });
      });
    };
    return {
      newgetUserChatLists,
      handleInput,
      delduihua,
      showMenu,
      promptsInputEnter,
      handleScroll,
      websoketnums,
      sendmsg,
      personlist,
      gobottom,
      rightboxList,
      uploadsucess,
      progressChange,
      fileQueued,
      getconfigData2,
      getEmjoi,
      close,
      openbqbClci,
      EmojiAdateClick,
      imgView,
      getUserChatPost,
      getUserChatLists,
      replaceGreaterThanSign,
      getnoticeRecode,
      personListClick,
      handleClose,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.chongxin {
  margin: 0 auto;
  cursor: pointer;
  width: 200px;
  height: 200px;
  margin-top: 21%;
  :deep(svg) {
    width: 40px;
    height: 40px;
    animation: rotate 0.5s linear infinite; /* 4秒一次完整旋转 */
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.isshowRightbox {
  position: absolute;
  right: 25%;
  top: 50%;
  z-index: 99;
  width: 100px;
  height: 42px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.icon-guanbi {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 20px;
}
.hongdian {
  position: absolute;
  right: -10px;
  top: 0;
  padding: 1px 4px;
  background: #ff1111;
  font-size: 6px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border-radius: 50%;
}
.moban {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 49;
}
.infoLfet {
  justify-content: flex-end;
}
.rightinput {
  position: relative;
  // border-radius: 20px;
  // margin: 0 auto;
  // background-color: #fff;
  // width: 680px;
  // height: 120px;
  > textarea {
    margin: 0 auto;

    padding: 11px 20px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #f7f9fa;
    width: 680px;
    height: 120px;
    overflow: auto;
  }
  .buttonInput {
    background-color: #fff;
    position: absolute;
    right: 32px;
    bottom: 10px;
    .svg {
      font-size: 24px;
      margin-right: 10px;
    }
  }
  .bqb {
    position: relative;
    .biaoqingbao {
      align-items: flex-start;
      z-index: 50;
      position: absolute;
      width: 242px;
      height: auto;
      background-color: #fff;
      border-radius: 20px;
      bottom: 22px;
      border: 1px solid #f7f9fa;
      right: 20px;
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      flex-wrap: wrap;
      padding: 10px;
      .biaoqingbaoitem {
        > img {
          width: 22px;
        }
      }
    }
  }
  .Sebdbutton {
    width: 70px;
    height: 36px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;

    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.nocenter {
  text-align: left !important;
}
.newinfobox {
  height: 500px !important;
}
.infoitem {
  .headerimg {
    > img {
      border-radius: 50%;
      width: 46px;
      height: 46px;
    }
  }
  .userinfo {
    margin-left: 10px;
    border-radius: 20px;
    // line-height: 56px;
    padding: 10px 20px;
    // width: 498px;
    // height: 56px;
    background: #ffffff;
    opacity: 1;
  }
  .userinfoImg {
    > img {
      width: 150px;
      height: 150px;
      border-radius: 20px;
    }
  }
}

.img {
  width: 268px;
  height: 140px;
}
.rightbox {
  // margin-left: 10px;
  width: 99%;
  height: 630px;
  overflow: auto;
  border-radius: 0 0 20px 0;
  background-color: #f7f9fa;
  flex: 1;

  .rightitem {
    padding: 0 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    text-align: center;
    > span {
      display: block;
      padding: 20px 0;
      text-align: center;
      font-size: 10px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
    .rightznxx {
      align-items: flex-start;
    }
    .znxximg {
      width: 46px;
      height: 46px;
      > img {
        width: 100%;
        height: 100%;
      }
    }

    .znxxcontent {
      padding: 20px;
      margin-left: 10px;
      width: 498px;
      //   height: 329px;
      background-color: #fff;
      border-radius: 20px;
    }
  }
}
.rightTitle {
  border-radius: 0px 20px 0 0;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  height: 60px;
  background-color: #fff;
  line-height: 60px;
  padding-left: 20px;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .el-dialog__body {
  padding: 0px;
}

::v-deep .el-badge__content.is-fixed {
  top: 16px;
}

.personLetter {
  align-items: flex-start;
  height: 700px;
  // padding: 10px 0 10px 5px;
  .left {
    border-radius: 20px 0 0 20px;
    padding: 20px 0 10px 20px;

    overflow: hidden;
    background-color: #fff;
    height: 700px;
    width: 280px;
    .leftTitle {
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    .leftbox {
      margin-top: 20px;
      width: 100%;
      overflow: auto;
      height: 614px;
      .item {
        cursor: pointer;
        position: relative;
        margin-top: 10px;
        margin-right: 10px;
        z-index: 50;
        border-radius: 10px;
        padding: 10px 0 10px 0;
        align-items: flex-start;
        // height: 70px;
        .itemleft {
          position: relative;
          .item {
            > img {
              border-radius: 50%;

              width: 46px;
              height: 46px;
            }
          }
        }
        .itemcenter {
          flex: 1;
          margin-left: 10px;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            &:last-child {
              display: block;
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              margin-top: 10px;
              font-size: 12px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
            }
          }
        }
        .itemright {
          span {
            font-size: 10px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
        &:hover {
          background-color: #f7f9fa;
        }
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
  .right {
    flex: 1;
  }
}
.color {
  background-color: #f7f9fa !important;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #c1c3c7;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
textarea:focus {
  outline: none;
}
/* 滚动条整体样式 */
textarea::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
textarea::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
textarea::-webkit-scrollbar-track {
  background-color: #f7f9fa;
}

/* 鼠标悬停时滚动条轨道样式 */
textarea::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
textarea {
  resize: none;
}
</style>
